<template>
  <AppHeader title="搜索" :banAnimate="true">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="writtenTest-container">
    <form action="/">
      <van-search
        background="#f5f5f5"
        shape="round"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
      >
        <template #action>
         <div @click="getBooks">搜索</div>
        </template>
      </van-search>

    </form>
    <van-tabs
      v-model:active="active"
      background="#f5f5f5"
      color="#0CB76C"
      title-active-color="#0CB76C"
      @click-tab="onClickTab"
    >
      <van-tab :title="item.gradeName" v-for="(item, idx) in grades">
        <div class="product-box">
          <div
            class="product-item"
            v-for="i in list"
            @click="handleClickItem(i)"
          >
            <img :src="i.cover_full" />
            <div class="product-txt">
              <span class="ellipsis-multiline2">{{ i.productName }}</span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter } from "vue-router";
import { ref, onMounted, watch } from "vue";
import {  getGrade } from "@/api/listening";
import { showToast } from 'vant';
import { writingList } from "@/api/writtenTest";

const router = useRouter();

const active = ref(0);
const list = ref([]);
const grades = ref([]);

const value = ref('');
const onClickLeft = () => {
  router.go(-1);
};
const handleClickItem = (item) => {
  router.push({
    path: "/writtenTest/details",
    query: { id: item.productId },
  });
};

const onClickTab = async (e) => {
  await getBooks();
};

const getGrades = async () => {
  const { data } = await getGrade();
  grades.value = [...[{grade:'',gradeName: "全部",period: "1"}],...data.data];
};

const getBooks = async () => {
  const { data } = await writingList({
    grade: grades.value[active.value].grade,
    key:value.value
  });
  console.log("听力-教材列表", data);
  list.value = data;
};

onMounted(async () => {
  await getGrades();
  await getBooks();
});
</script>

<style scoped lang="scss">
.writtenTest-container {
  background-color: rgb(245, 245, 245);
  height: calc(100vh - 46px);
  width: 100%;
  padding-top: 46px;

  .product-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(111px, 1fr));
    justify-items: center;
    padding-top: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 105px);
    min-height: 300px;
    .product-item {
      width: 111px;
      min-height: 192px;
      display: flex;
      flex-direction: column;
      font-size: 12px;
      margin-bottom: 6px;
      overflow: hidden;
      .product-txt {
        padding: 10px 5px;
        background-color: #fff;
        min-height: 50px;
        border-radius: 0 0 16px 16px;
      }
      img {
        height: 132px;
        border-radius: 15px 15px 0 0;
      }
    }
  }
}
</style>
